<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="/css/douban/douban.css">
    <link rel="stylesheet" href="/css/douban/bundle.css">
    <link rel="stylesheet" href="/css/douban/init.css">
    <link rel="stylesheet" href="/css/douban/bundle1.css">
    <link rel="stylesheet" href="/css/douban/home.css">
    <link rel="stylesheet" href="/css/douban/11d116.css">
    <link rel="stylesheet" href="/css/douban/gallery.css">
    <link rel="stylesheet" href="/css/douban/54ac.css">
    <link rel="stylesheet" href="/css/style.css">
    <link rel="stylesheet" href="/css/discuss.css">
    <script th:src="@{/lib/layui-v2.6.3/layui.js}" charset="utf-8"></script>
    <link rel="stylesheet" th:href="@{/lib/layui-v2.6.3/css/layui.css}" media="all">
</head>
<style>
    .bigstar50,.bigstar45,.bigstar40,.bigstar35,.bigstar30,.bigstar25,.bigstar20,.bigstar15,.bigstar10,.bigstar05,.bigstar00,.bigstar5,.bigstar0{display:inline-block;*display:inline;zoom:1;background:url(/images/ic_rating_m.png) no-repeat;background:-webkit-image-set(url(/images/ic_rating_m.png) 1x, url(/images/ic_rating_m.png) 2x) no-repeat;background:-moz-image-set(url(/images/ic_rating_m.png) 1x, url(/images/ic_rating_m.png) 2x) no-repeat;background:-o-image-set(url(/images/ic_rating_m.png) 1x, url(/images/ic_rating_m.png) 2x) no-repeat;background:-ms-image-set(url(/images/ic_rating_m.png) 1x, url(/images/ic_rating_m.png) 2x) no-repeat;width:75px;height:15px;margin:1px 0 0 0;overflow:hidden}.bigstar50+span.rating_num,.bigstar45+span.rating_num,.bigstar40+span.rating_num,.bigstar35+span.rating_num,.bigstar30+span.rating_num,.bigstar25+span.rating_num,.bigstar20+span.rating_num,.bigstar15+span.rating_num,.bigstar10+span.rating_num,.bigstar05+span.rating_num,.bigstar00+span.rating_num{font-size:16px;line-height:1}.bigstar50{background-position:0 0px}.bigstar45{background-position:0 -15px}.bigstar40{background-position:0 -30px}.bigstar35{background-position:0 -45px}.bigstar30{background-position:0 -60px}.bigstar25{background-position:0 -75px}.bigstar20{background-position:0 -90px}.bigstar15{background-position:0 -105px}.bigstar10{background-position:0 -120px}.bigstar05{background-position:0 -135px}.bigstar5{background-position:0 -135px}.bigstar00{background-position:0 -150px}.bigstar0{background-position:0 -150px}.allstar50,.allstar45,.allstar40,.allstar35,.allstar30,.allstar25,.allstar20,.allstar15,.allstar10,.allstar05,.allstar0,.allstar5,.allstar00,.rating1-t,.rating15-t,.rating2-t,.rating25-t,.rating3-t,.rating35-t,.rating4-t,.rating45-t,.rating5-t,.rating-t,.starb~.stars5,.starb~.stars4,.starb~.stars3,.starb~.stars2,.starb~.stars1,.collectors .stars5,.collectors .stars4,.collectors .stars3,.collectors .stars2,.collectors .stars1{display:inline-block;*display:inline;zoom:1;background:url(/images/ic_rating_s.png) no-repeat;background:-webkit-image-set(url(/images/ic_rating_s.png) 1x, url(/images/ic_rating_s.png) 2x) no-repeat;background:-moz-image-set(url(/images/ic_rating_s.png) 1x, url(/images/ic_rating_s.png) 2x) no-repeat;background:-o-image-set(url(/images/ic_rating_s.png) 1x, url(/images/ic_rating_s.png) 2x) no-repeat;background:-ms-image-set(url(/images/ic_rating_s.png) 1x, url(/images/ic_rating_s.png) 2x) no-repeat;width:55px;height:11px;margin:0 3px 0 0;overflow:hidden}.status-item .allstar50,.status-item .allstar45,.status-item .allstar40,.status-item .allstar35,.status-item .allstar30,.status-item .allstar25,.status-item .allstar20,.status-item .allstar15,.status-item .allstar10,.status-item .allstar05,.status-item .allstar00,.status-item .rating1-t,.status-item .rating15-t,.status-item .rating2-t,.status-item .rating25-t,.status-item .rating3-t,.status-item .rating35-t,.status-item .rating4-t,.status-item .rating45-t,.status-item .rating5-t,.status-item .rating-t,.status-item .starb~.stars5,.status-item .starb~.stars4,.status-item .starb~.stars3,.status-item .starb~.stars2,.status-item .starb~.stars1,.status-item .collectors .stars5,.status-item .collectors .stars4,.status-item .collectors .stars3,.status-item .collectors .stars2,.status-item .collectors .stars1{margin:0 0 0 4px}.allstar50{background-position:0 0px}.allstar45{background-position:0 -11px}.allstar40{background-position:0 -22px}.allstar35{background-position:0 -33px}.allstar30{background-position:0 -44px}.allstar25{background-position:0 -55px}.allstar20{background-position:0 -66px}.allstar15{background-position:0 -77px}.allstar10{background-position:0 -88px}.allstar05{background-position:0 -99px} .allstar5{background-position:0 -99px}.allstar00{background-position:0 -110px} .allstar0{background-position:0 -110px}.rating5-t,.starb~.stars5,.collectors .stars5{background-position:0 0px}.rating45-t{background-position:0 -11px}.rating4-t,.starb~.stars4,.collectors .stars4{background-position:0 -22px}.rating35-t{background-position:0 -33px}.rating3-t,.starb~.stars3,.collectors .stars3{background-position:0 -44px}.rating25-t{background-position:0 -55px}.rating2-t,.starb~.stars2,.collectors .stars2{background-position:0 -66px}.rating15-t{background-position:0 -77px}.rating1-t,.starb~.stars1,.collectors .stars1{background-position:0 -88px}.rating1-t,.rating15-t,.rating2-t,.rating25-t,.rating3-t,.rating35-t,.rating4-t,.rating45-t,.rating5-t,.rating-t{padding-left:5px}#stars{font-size:0;vertical-align:text-bottom;cursor:pointer}#stars a img{vertical-align:text-bottom}.starstop,.stars{margin-right:5px}.starstop{float:left}.rating_nums,.rating_num{color:#e09015;font-size:12px;padding:0 3px}.status-item .rating_num{font-size:14px}.rating_nums{padding-left:0}.star .rating_num{color:#e09015;padding:0 5px 0 0}#interest_sect{overflow:hidden;word-wrap:break-word}#interest_sectl{float:left;width:155px;margin:2px 0 0 0;padding:0 0 0 15px;border-left:1px solid #eaeaea;color:#9b9b9b}#interest_sectl .rating_wrap{padding-bottom:15px;font-size:12px;line-height:14px}#interest_sectl .rating_wrap .rating_logo{line-height:1}#interest_sectl .rating_self{padding:0;line-height:2}#interest_sectl .rating_self:before,#interest_sectl .rating_self:after{content:'';display:block;clear:both}#interest_sectl .rating_self .rating_sum{clear:both}#interest_sectl .rating_num{color:#494949;padding:0;min-width:30%;font-size:28px}#interest_sectl .rating_right{float:left;padding:10px 0 10px 6px}#interest_sectl .rating_right.not_showed{padding:10px 0}#interest_sectl .power{height:10px;float:left;margin:1px 4px;background:#ffd596 none repeat scroll 0 0}#interest_sectl .power.color_gray{background:#ccc}#interest_sectl .rating_per{font-size:11px}#interest_sectl .rating_betterthan{position:relative;padding:15px 0;border-top:1px solid #eaeaea;color:#9b9b9b;margin:0}.rating_logo_wrap .content{display:inline-block;*display:inline;zoom:1;vertical-align:top;font-size:12px;line-height:20px;color:#9b9b9b;margin-right:4px}.rating_helper_wrap{display:inline-block;*display:inline;zoom:1;vertical-align:top;position:relative;line-height:18px}.rating_helper_wrap:hover .rating_helper_icon{background-position:0 -12px}.rating_helper_wrap:hover .rating_helper_content{display:block}.rating_helper_icon{background:url(/f/shire/16305b59f6b69b8acde51c880de2a5b6cde0155a/pics/icon/ic_qmark.png) no-repeat;background:-webkit-image-set(url(/f/shire/16305b59f6b69b8acde51c880de2a5b6cde0155a/pics/icon/ic_qmark.png) 1x, url(/f/shire/1fb4f85391f82c3286d7318d840577daae1c2eee/pics/icon/ic_qmark@2x.png) 2x) no-repeat;background:-moz-image-set(url(/f/shire/16305b59f6b69b8acde51c880de2a5b6cde0155a/pics/icon/ic_qmark.png) 1x, url(/f/shire/1fb4f85391f82c3286d7318d840577daae1c2eee/pics/icon/ic_qmark@2x.png) 2x) no-repeat;background:-o-image-set(url(/f/shire/16305b59f6b69b8acde51c880de2a5b6cde0155a/pics/icon/ic_qmark.png) 1x, url(/images/ic_rating_s.png) 2x) no-repeat;background:-ms-image-set(url(/f/shire/16305b59f6b69b8acde51c880de2a5b6cde0155a/pics/icon/ic_qmark.png) 1x, url(/images/ic_rating_s.png) 2x) no-repeat;display:inline-block;*display:inline;zoom:1;vertical-align:middle;width:12px;height:12px}.rating_helper_content{z-index:10;color:#494949;display:none;position:absolute;left:12px;bottom:3px;width:96px;background:#fef6e9;border:1px solid #e3d9ca;padding:8px 10px;border-radius:4px;box-shadow:0 2px 5px rgba(0,0,0,0.1)}.rating_content_wrap{width:110%;padding-bottom:8px}.rating_content_wrap .rating_avg{float:left;font-size:16px;line-height:28px;color:#494949;margin-right:12px}.rating_content_wrap .friends{float:left;margin-right:6px}.rating_content_wrap .avatar{float:left;margin-top:6px;margin-right:2px;line-height:0;border-radius:50%;overflow:hidden;cursor:default}.rating_content_wrap .avatar img{width:16px}.rating_content_wrap .friends_count{float:left;line-height:14px;margin-top:7px}#screening .subject-rate{color:#e09015;font-size:12px;margin-left:2px}#screening .rating{display:inline-block;*display:inline;zoom:1;margin:4px auto 2px;height:19px}#screening .rating span{float:left}#screening .rating .rating-star{margin:3px 3px 0 0;width:55px}span.subject-rate,.rate,.subject-rating{color:#e09015}img.rating{vertical-align:text-bottom}img.rating:nth-child(1){padding-left:10px}.rec-list .score{color:#e09015}.album-item .star{line-height:1;margin-top:6px}.album-item .star .allstar50,.album-item .star .allstar45,.album-item .star .allstar40,.album-item .star .allstar35,.album-item .star .allstar30,.album-item .star .allstar25,.album-item .star .allstar20,.album-item .star .allstar15,.album-item .star .allstar10,.album-item .star .allstar05,.album-item .star .allstar00{float:left}.album-item .star .score{color:#e09015}.game-ratings strong{margin:0 6px;color:#e09015}.link-subject .rate-more span{font-size:10px;color:#e09015}.rating-controversy-reason{background-color:#FFFBF4;color:#494949;line-height:14px;margin:15px 0px 0px 0px;padding:6px 20px 6px 35px;font-size:11px;position:relative}.rating-controversy-reason:before{content:'';display:block;width:14px;height:14px;position:absolute;left:12px;top:50%;transform:translateY(-50%);background-image:url("data:image/svg+xml, %3Csvg%20width%3D%2216%22%20height%3D%2216%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M8%200a8%208%200%20110%2016A8%208%200%20018%200zm0%2010.667a1%201%200%20100%202%201%201%200%20000-2zm0-8a1.207%201.207%200%2000-1.2%201.326l.467%204.677a.737.737%200%20001.466%200l.468-4.677A1.207%201.207%200%20008%202.667z%22%20fill%3D%22%23B2B2B2%22%20fill-rule%3D%22evenodd%22%2F%3E%3C%2Fsvg%3E");background-size:contain}
</style>
<body>
<div id="db-global-nav" class="global-nav">
    <div class="bd">
        <div class="top-nav-info layui-form">
            <a href="" lay-filter="login" lay-submit="" class="nav-login" rel="nofollow" id="login_title">登录/注册</a>
            <a href="/index" class="nav-login" rel="nofollow" id="goindex">去主页</a>
        </div>
    </div>
</div>
<div id="db-nav-movie" class="nav">
    <div class="nav-wrap">
        <div class="nav-primary">
            <div class="nav-logo">
                <a href="/">电影推荐</a>
            </div>
            <div class="nav-search">
                <form action="/search">
                    <fieldset>
                        <legend>搜索：</legend>
                        <label for="inp-query"></label>
                    </fieldset>
                    <div class="inp">
                        <input id="inp-query" name="searchVal" required size="22" maxlength="60" placeholder="搜索电影" value autocomplete="off">
                        <input name="page" value="1" hidden>
                        <input name="limit" value="10" hidden>
                    </div>
                    <div class="inp-btn">
                        <input type="submit" value="搜索" >
                    </div>
                </form>
            </div>
        </div>
    </div>
    <div class="nav-secondary">
        <div class="nav-items">
            <ul>
                <li><a href="/search?searchVal=Adventure&page=1&limit=10">Adventure</a>
                </li>
                <li><a href="/search?searchVal=Animation&page=1&limit=10">Animation</a>
                </li>
                <li><a href="/search?searchVal=Children&page=1&limit=10">Children</a>
                </li>
                <li><a href="/search?searchVal=Comedy&page=1&limit=10">Comedy</a>
                </li>
                <li><a href="/search?searchVal=Fantasy&page=1&limit=10">Fantasy</a>
                </li>
                <li><a href="/search?searchVal=Romance&page=1&limit=10">Romance</a>
                </li>
                <li><a href="/search?searchVal=Drama&page=1&limit=10">Drama</a>
                </li>
                <li><a href="/search?searchVal=Action&page=1&limit=10">Action</a>
                </li>
                <li><a href="/search?searchVal=Crime&page=1&limit=10">Crime</a>
                </li>
                <li><a href="/search?searchVal=Thriller&page=1&limit=10">Thriller</a>
                </li>
                <li><a href="/search?searchVal=Sci-Fi&page=1&limit=10">Sci-Fi</a>
                </li>
                <li><a href="/search?searchVal=Musical&page=1&limit=10">Musical</a>
                </li>
                <li><a href="/search?searchVal=Mystery&page=1&limit=10">Mystery</a>
                </li>
            </ul>
        </div>
    </div>
</div>
<div id="wrapper">
    <div id="content">
        <h1 th:text="${movie.title}">
        </h1>
        <div class="grid-16-8 clearfix">
            <div class="article">
                <div class="indent clearfix">
                    <div class="subjectwrap clearfix">
                        <div class="subject clearfix">
                            <div id="mainpic">
                                <a class="nbg" href="">
                                    <img src="/images/p2719097587.webp" height="191.5">
                                </a>
                            </div>
                            <div id="info">
                                <span>
                                    <span class="p1">导演</span>：
                                    <span class="attrs" th:text="${movie.director}">别克</span>
                                </span>
                                <br>
                                <br>
                                <span>
                                    <span class="p1">编剧</span>：
                                    <span class="attrs" th:text="${movie.scenario}">张三/李四</span>
                                </span>
                                <br>
                                <br>
                                <span>
                                    <span class="p1">主演</span>：
                                    <span class="attrs" th:text="${movie.actor}">王五/李华</span>
                                </span>
                                <br>
                                <br>
                                <span>
                                    <span class="p1">类型</span>：
                                    <span class="attrs" th:text="${movie.genres}">剧情/悬疑/犯罪</span>
                                </span>
                                <br>
                                <br>
                                <span>
                                    <span class="p1">制片国家/地区</span>：
                                    <span class="attrs" th:text="${movie.location}">中国大陆</span>
                                </span>
                                <br>
                                <br>
                                <span>
                                    <span class="p1">语言</span>：
                                    <span class="attrs" th:text="${movie.language}">汉语普通话</span>
                                </span>
                                <br>
                                <br>
                                <span>
                                    <span class="p1">上映日期</span>：
                                    <span class="attrs" th:text="${movie.releaseTime}">2021-11-19</span>
                                </span>
                            </div>
                        </div>
                        <div id="interest_sectl">
                            <div class="clearfix">
                                <div class="rating-logo ll">网站评分</div>
                            </div>
                            <div class="rating-self clearfix">
                                <div class="rating_self clearfix" >
                                    <strong class="ll rating_num" th:text="${movie.point}">8.4</strong>
                                    <div class="rating_right ">
                                        <div th:class="'ll bigstar bigstar'+${movie.siteRate}"></div>
                                        <div class="rating_sum">
                                            <a href="" class="rating_people">
<!--                                                <span >27102</span>人评价-->
                                            </a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div id="interest_sect_level" class="clearfix">
                        <span>评分：</span>
                        <div id="test1"></div>
                    </div>
                </div>
                <div class="ralated" style="margin-bottom: -10px">
                    <h2>
                        <i class="color-green">剧情简介</i>· · · · · ·
                    </h2>
                    <div class="indent">
                        <span th:text="${movie.remark}">
                        </span>
                    </div>
                </div>
                <div id="comments-section">
                    <div class="mod-hd">
                        <h2>
                            <i class="" th:text="${movie.title}+'的短评'"></i>
                            · · · · · ·
                            <span class="pl">
                            (
                                <a th:href="'/system/comment/'+${movie.movieId}+'?limit=10&page=1'" th:text="'全部 '+${count}+' 条'"></a>
                            )
                            </span>
                        </h2>
                    </div>
                    <div class="mod-bd">
                        <div class="tab-bd">
                            <div id="hot-comments" class="tab">
                                <div class="comment-item" th:each="comment:${comments}">
                                    <div class="comment">
                                        <h3>
                                            <span class="comment-info">
                                                <a href="" class="" th:text="${comment.loginName}"></a>
                                                 <span th:class="'allstar'+${comment.rate}+' rating'" title="力荐"></span>
                                                <span class="comment-time " th:text="${#dates.format(comment.time,'yyyy-MM-dd HH:mm:ss')}">
                                                </span>
                                            </span>
                                        </h3>
                                        <p class=" comment-content">
                                            <span class="short" th:text="${comment.comment}"></span>
                                        </p>
                                    </div>
                                </div>

                                &gt; <a th:href="'/system/comment/'+${movie.movieId}+'?limit=10&page=1'" th:text="'更多短评 '+${count}+' 条'"></a>
                            </div>
                        </div>
                    </div>
                </div>


                <div class="model layui-form">
                    <div style="background-image:url(//p2.img.cctvpic.com/photoAlbum/templet/common/DEPA1406601454073701/mhd_bg02.jpg)" class="mhd"><span class="title">我要评论</span><span class="discuss" id="commentCount"></span></div>
                    <div class="mbd">
                        <div class="discuss_log">
                            <div class="logbox" style="border-color: rgb(231, 231, 231);">
                                <div class="postbox">
                                    <textarea maxlength="255" placeholder="根据法律法规要求，请您绑定手机号完成后台实名认证后发表评论。感谢您的理解和支持！" name="content" id="comment_content" class="inp" style="color: rgb(117, 117, 117);"></textarea>
                                </div>
                                <div class="userbox" id="comment_nologin">
                                    <span class="logbtn">
                                        <span class="button">
                                            <a href="javascript:;" lay-filter="login" lay-submit="">登录</a>
                                        </span>
                                    </span>
                                </div>
                                <div class="userbox" id="comment_login" style="display: none">
                                    <span class="link"><a href="/logout" target="_top" >退出</a></span>
                                    <span class="summitbtn"><a href="javascript:comment()">发表评论</a></span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<script src="/lib/jquery-3.4.1/jquery-3.4.1.min.js"></script>
<script>
    var flag = false
    $.ajax({
        url:"/isLogin",
        method:"get",
        success:function (res) {
            if(res){
                flag=true
                document.getElementById("login_title").innerText="已登录"
                $("#login_title").attr("disabled",true).css("pointer-events","none");
                document.getElementById("goindex").style.display="inline";
                document.getElementById("comment_nologin").style.display="none";
                document.getElementById("comment_login").style.display="inline";
            }
            else {
                flag=false
                document.getElementById("login_title").innerText="登录/注册"
                document.getElementById("goindex").style.display="none";
                document.getElementById("comment_nologin").style.display="inline";
                document.getElementById("comment_login").style.display="none";
            }
        }
    })
    function comment(){
        if($("#comment_content").val()===''){
            layer.msg("请输入评论内容")
            return false
        }
        $.ajax({
            url:"/system/comment/insert",
            method:"post",
            data:{
                movieId:'[[${movie.movieId}]]',
                comment:$("#comment_content").val()
            },
            success:function (res) {
                layer.msg(res.msg)
            }
        })

    }
    layui.use(['rate','form','layer','jquery'], function(){
        var rate = layui.rate,
            form = layui.form
            layer = layui.layer
            $ = layui.jquery;

        //渲染
        var ins1 = rate.render({
            elem: '#test1',  //绑定元素
            half:true,
            choose:function (val) {
               if(flag){
                    $.ajax({
                        url:"/system/rate/rate/"+'[[${movie.movieId}]]'+"?rate="+val,
                        method:"post",
                        success:function (res) {
                            layer.msg(res.msg)
                        }
                    })
               }
               else {
                   layer.alert("您未登录，请登录后评分")
               }
            }
        });

        form.on('submit(login)',function () {
            var index = layer.open({
                title: '登录/注册',
                type: 2,
                shade: 0.2,
                maxmin:true,
                shadeClose: true,
                area: ['28%', '58%'],
                content: '/clogin'
            });
            $(window).on("resize", function () {
                layer.full(index);
            });
            return false;
        })
    });
</script>
</body>
</html>